<template>
    <div class="checkstand">
        <!--<div class="header">-->
            <!--<div class="backPage" @click="backPage">-->
                <!--<image class="arrow_left" :src="imgPath('back.png')"></image>-->
                <!--<text class="back col_fff">返回</text>-->
            <!--</div>-->
            <!--<text class="title col_fff">收银台</text>-->
            <!--<div class="btn-wrapper"></div>-->
        <!--</div>-->
        <IHeader class="header" back="true" title="收银台"></IHeader>
        <div class="payRow">
            <div class="rows" v-for="(item, index) in payData" :key="index" @click="choosePayType(index)">
                <div class="rowsLeft">
                    <image :src="imgPath(item.src)" class="payImg"></image>
                    <div class="leftText">
                        <text class="bigText">{{item.bigTit}}</text>
                        <text class="smText">{{item.smlTit}}</text>
                    </div>
                </div>
                <div class="rowsRight">
                    <image :src="imgPath(item.icon)" class="chooseImg" v-if="indx === index"></image>
                </div>
            </div>
        </div>
        <div class="payBtn" v-if="indx === 0">
            <div class="Btn" @click="checkPay">
                <text class="btntext">微信支付￥</text>
                <text class="btntext">{{totalPrice}}</text>
            </div>
        </div>
        <div class="payBtn"  v-if="indx === 1" >
            <div class="Btn" @click="chooseBankCard">
                <text class="btntext">快捷支付￥</text>
                <text class="btntext">{{totalPrice}}</text>
            </div>
        </div>
        <Modal :type="0" :show="showModal" word="该功能暂未开放"></Modal>
        <!--<div class="chooseCardModal" v-if="cardModalShow">-->
            <!--<div class="modal">-->
                <!--<div class="modal-header">-->
                    <!--<image :src="imgPath('arrow_right.png')" class="arrowRight" @click="goBack"></image>-->
                    <!--<text>确认支付信息</text>-->
                    <!--<div></div>-->
                <!--</div>-->
                <!--<div class="tradeHeader">-->
                    <!--<div class="topText">-->
                        <!--<text class="text">￥</text>-->
                        <!--<text class="text">500.00</text>-->
                    <!--</div>-->
                    <!--<div class="topText">-->
                        <!--<text class="text1">泳衣库-订单编号</text>-->
                        <!--<text class="text1">12345678910</text>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="rows1">-->
                    <!--<text class="rowText">收款方</text>-->
                    <!--<text class="rowText">泳衣库平台商户</text>-->
                <!--</div>-->
                <!--<div class="payBtn"  @click="pushToBank">-->
                    <!--<div class="Btn">-->
                        <!--<text class="btntext">银行卡支付￥</text>-->
                        <!--<text class="btntext">500</text>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="chooseCardModal" v-if="bankCardShow">-->
            <!--<div class="modal">-->
                <!--<div class="modal-header">-->
                    <!--<div class='blank'></div>-->
                    <!--<text>选择银行卡</text>-->
                    <!--<image :src="imgPath('dialog_close.png')" class="close" @click="closeModal"></image>-->
                <!--</div>-->
                <!--<div class="modal-con">-->
                    <!--<image :src="imgPath('excipient_dealer.png')" class="cardImg"></image>-->
                    <!--<div class="modal-right">-->
                        <!--<text class="cardname">中国工商银行储蓄卡（6666）</text>-->
                        <!--<text class="morentext">默认</text>-->
                        <!--&lt;!&ndash;<image :src="imgPath('create_active.png')"  class="dagou"></image>&ndash;&gt;-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="modal-con">-->
                    <!--<image :src="imgPath('excipient_dealer.png')" class="cardImg"></image>-->
                    <!--<div class="modal-right">-->
                        <!--<text class="cardname">中国工商银行储蓄卡（6666）</text>-->
                        <!--<image :src="imgPath('create_active.png')"  class="dagou"></image>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="modal-con">-->
                    <!--<image :src="imgPath('excipient_dealer.png')" class="cardImg"></image>-->
                    <!--<div class="modal-right">-->
                        <!--<text class="cardname">添加银行卡付款</text>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="payBtn confirm">-->
                    <!--<div class="Btn confirm-btn"  @click="chooseConfirm">-->
                        <!--<text class="btntext">确认</text>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="chooseCardModal " v-if="payPwd">-->
            <!--<div class="modal pwdModal">-->
                <!--<div class="modal-header">-->
                    <!--<image :src="imgPath('arrow_right.png')" class="arrowRight" @click="fanhui"></image>-->
                    <!--<text>请输入支付密码</text>-->
                    <!--<div class='blank'></div>-->
                <!--</div>-->
                <!--<div class="pwdCon">-->
                    <!--<div class="pwdText" v-for="(item, i) in items" :key="i">-->
                        <!--<text  v-if="password[i]" class="icon_dot" ></text>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="forgetPwd">-->
                    <!--<text class="forgetTxt">忘记密码</text>-->
                <!--</div>-->
                <!--<div class="keyCode">-->
                    <!--<text class="keyword" v-for="(item, index) in dataList" :key="index"  @click="keyUpHand($event)">{{item.content}}</text>-->
                        <!--<div class="keyword keyPic"  @click="delHandle">-->
                        <!--<image :src="imgPath('Choice_11.png')" class="deleteImg"></image>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</template>

<script>
import IHeader from '@/components/header'
import ImageUpload from '@/components/imageUpload'
import Modal from '@/components/modal'
import { appPay } from '@/api/common'
const modal = weex.requireModule('modal')
const wxPay = weex.requireModule('wxPay')
// const bmWXPay = weex.requireModule('bmWXPay')

export default {
  name: 'checkstand',
  data () {
    return {
      cardModalShow: false,
      bankCardShow: false,
      payPwd: false,
      dataList: [{'content': '1'}, {'content': '2'}, {'content': '3'}, {'content': '4'}, {'content': '5'}, {'content': '6'}, {'content': '7'}, {'content': '8'}, {'content': '9'}, {'content': ''}, {'content': '0'}],
      items: [0, 1, 2, 3, 4, 5],
      password: [],
      indx: 0,
      orderId: '', // 订单ID
      orderNo: '', // 订单编号
      showModal: false,
      totalPrice: 0, // 总价格
      payData: [{'bigTit': '微信支付', 'smlTit': '微信安全付款', 'type': 1, 'src': 'we_chat_pay.png', 'icon': 'checked.png'}, {'bigTit': '快捷支付', 'smlTit': '泳衣库快捷支付服务', 'type': 2, 'src': 'quick_pay.png', 'icon': 'checked.png'}]
    }
  },
  created () {
    this.totalPrice = this.$route.query.totalPrice
    this.orderId = this.$route.query.orderId
    this.orderNo = this.$route.query.orderNo
    // bmWXPay.initWX('wxfe08ebe692c7b064')
    // let result = bmWXPay.isInstallWXApp()
    wxPay.register()
    // modal.toast({
    //   message: '初始化'
    // })
  },
  methods: {
    backPage () {
      const that = this
      modal.confirm({
        message: '确定离开收银台？',
        okTitle: '确定离开',
        cancelTitle: '继续支付'
      }, function (value) {
        if (value === '确定离开') {
          that.$router.push('/myorder/storeOrder')
        }
      })
    },
    choosePayType (index) { // 切换支付类型
      this.indx = index
    },
    // 点击快捷支付
    chooseBankCard () {
      const that = this
      that.showModal = true
      setTimeout(() => {
        that.showModal = false
      }, 800)
    },
    checkPay () { // 调起支付接口
      const that = this
      // let result = bmWXPay.isInstallWXApp()
      // if (!result) {
      //   modal.toast({
      //     message: '请先安装微信'
      //   })
      //   return
      // }
      // modal.toast({
      //   message: JSON.stringify(bmWXPay)
      // })
      // return
      let params = {
        outTradeNo: that.orderNo,
        totalFee: that.totalPrice,
        body: '泳衣库商品'
      }
      that.$api.post(appPay, params, (res) => {
        let sendParams = res.data
        wxPay.sendPay(sendParams)
        // bmWXPay.pay({ // 微信支付所需必要参数
        //   appid: sendParams.appid,
        //   sign: sendParams.sign,
        //   timestamp: sendParams.timestamp,
        //   noncestr: sendParams.noncestr,
        //   partnerid: sendParams.partnerid,
        //   prepayid: sendParams.prepayid,
        //   packageValue: sendParams.package
        // }, function (code) {
        //   modal.toast({
        //     message: code
        //   })
        //   // if (code === 0) {
        //   //   that.$router.push({
        //   //     path: '/myorder/payFinish',
        //   //     query: {
        //   //       orderNo: that.orderNo,
        //   //       totalPrice: that.totalPrice
        //   //     }
        //   //   })
        //   // } else {
        //   //   modal.toast({
        //   //     message: '支付失败'
        //   //   })
        //   //   that.$router.push({
        //   //     path: '/mine/waitGain',
        //   //     query: {
        //   //       orderId: that.orderId
        //   //     }
        //   //   })
        //   // }
        // })
      })
    }
  },
  components: {
    ImageUpload,
    IHeader,
    Modal
  }
}
</script>

<style scoped>
    .col_fff {
        color: #fff;
    }
    .checkstand {
        background-color: rgb(245,245,245);
    }
    .payRow{
        padding-left: 24px;
        padding-right: 24px;
        background-color: #fff;
        margin-top: 88px;
    }
    .rows{
       height: 108px;
        border-bottom-width: 1px;
        border-bottom-color: rgb(235,235,235);
        border-bottom-style: solid;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
.rows1{
    height: 88px;
    border-bottom-width: 1px;
    border-bottom-color: rgb(235,235,235);
    border-bottom-style: solid;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    background-color: white;
}
    .rowsLeft{
        flex-direction: row;
    }
    .payImg{
       width: 62px;
       height:62px;
    }
    .leftText{
       flex-direction: column;
        margin-left:25px;
    }
    .bigText{
        font-size:30px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .smText{
        font-size:26px;
        color:rgb(134,134,134);
        font-family:medium
    }
    .chooseImg{
        width:40px;
        height:40px;
    }
    .payBtn{
        margin-top:98px;
        flex-direction:row;
        justify-content: center;
        align-items: center;
    }
    .Btn{
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        height:60px;
        padding-left:195px;
        padding-right:195px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .btntext{
        color:rgb(255,255,255);
        font-size:30px;
        font-family:medium;
    }
    .chooseCardModal{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.3);
    }
    .modal{
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        background-color: rgb(245,245,245);
        padding-bottom:250px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .close{
        width:31px;
        height:31px
    }
    .modal-header{
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 28px;
        border-bottom-style: solid;
        border-bottom-color: rgb(206,206,206);
        border-bottom-width: 1px;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 28px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .modal-con{
        flex-direction: row;
        align-items: center;
        background-color: #fff;
        padding-left: 24px;
        padding-right: 24px;
    }
    .modal-right{
        flex-direction: row;
        justify-content: space-between;
        border-bottom-style: solid;
        border-bottom-color: rgb(206,206,206);
        border-bottom-width: 1px;
        padding-bottom:24px;
        padding-top:24px;
        flex:1;
        margin-left:24px;

    }
    .cardImg{
        width:60px;
        height:60px;
    }
    .dagou{
        width:31px;
        height:31px;
    }
.morentext{
    font-size:24px;
    color:rgb(255,15,55)
}
    .confirm{
        margin-top: 120px;
    }
    .confirm-btn{
        padding-left: 273px;
        padding-right: 273px;
    }
.tradeHeader{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top:50px;
    padding-bottom: 65px;
}
.topText{
    flex-direction: row;
    align-items: baseline;
}
.text{
    font-size:98px;
    font-weight:bold;
}
/*.rows{*/
    /*height:108px;*/
    /*background-color: #fff;*/
    /*padding-left:24px;*/
    /*padding-right:24px;*/
    /*flex-direction: row;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
/*}*/
.rowText{
    font-size: 28px;
    color: rgb(134,134,134);
}
    .arrowRight{
        width:24px;
        height:36px;
    }
    .pwdCon{
        flex-direction: row;
        justify-content: space-between;
        padding-left: 24px;
        padding-right: 24px;
        margin-top:50px;
    }
    .pwdText{
       width: 102px;
        height: 102px;
        background-color: rgb(206,206,206);
        border-radius: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .forgetPwd{
        flex-direction: row;
        justify-content: flex-end;
        padding-right:24px;
        padding-left:24px;
        margin-top:30px;
    }
    .forgetTxt{
        font-size: 26px;
        font-family: medium;
        color:rgb(255,15,55);
    }
    .keyCode{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        background-color: #Fff;
        margin-top:135px;
    }
    .keyword{
        flex-wrap: wrap;
        width:249px;
        height:96px;
        border-right-color: rgb(235,235,235);
        border-right-width: 1px;
        border-right-style: solid;
        border-top-color: rgb(235,235,235);
        border-top-width: 1px;
        border-top-style: solid;
        text-align: center;
        line-height: 95px;
    }
    .deleteImg{
        width:50px;
        height:30px;
    }
    .keyPic{
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .pwdModal{
        padding-bottom: 0;
    }
    .icon_dot{
        width: 20px;
        height: 20px;
        background-color: rgb(0,0,0);
        border-radius: 10px;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        flex-direction: row;
        height: 88px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .backPage {
        width: 200px;
        flex-direction: row;
        align-items: center;
        padding-right: 8px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 32px;
        line-height: 88px;
    }
    .title {
        width: 350px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        line-height: 88px;
    }
    .btn-wrapper {
        width: 200px;
        padding-right: 24px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
</style>
